<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <link rel="icon" href="data:;base64,=">
</head>
<body>
<div id="app">
    <el-button type="primary" @click="openTree">新增角色</el-button>
    <template>
        <el-button type="primary" @click="openTree">角色授权</el-button>
        <el-table
                ref="tableCheck"
                @current-change="handleSelectionChange"
                :data="tableData"
                style="width: 100%"
                @select-all="selectAll"
                @select="handleSelectionChangeOne"
                >
            <el-table-column
                    type="selection"
                    width="55">
            </el-table-column>
            <el-table-column
                    label="id">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.id }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    label="角色名">
                <template slot-scope="scope">
                    <span style="margin-left: 10px">{{ scope.row.name }}</span>
                </template>
            </el-table-column>
            <el-table-column
                    fixed="right"
                    label="操作"
                    width="100">
                <template slot-scope="scope">
                    <el-button @click="openForm(scope.row)" type="button" size="small">修改</el-button>
                    <template>
                        <el-button  @click="deleteRole" type="danger">删除</el-button>
                    </template>
                </template>
            </el-table-column>
        </el-table>
    </template>
    <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
            :page-size="pageSize"
            :page-count="total"
            @current-change="loadPage">
    </el-pagination>
    <!--树形选择-->
    <el-dialog title="商品详情" :visible.sync="dialogTreeVisible">
        <el-tree
                :data="functions"
                @check="checkTreeNodes"
                show-checkbox
                default-expand-all
                node-key="id"
                ref="tree"
                highlight-current
                :props="defaultProps"
                >
        </el-tree>
    </el-dialog>
    <!-- Form -->
    <el-dialog title="角色信息" :visible.sync="dialogFormVisible">
        <el-form :model="role">
            <el-form-item label="角色名" >
                <el-input v-model="role.name" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleRole">确 定</el-button>
        </div>
    </el-dialog>
</div>
</body>
<script src="/js/vue/vue.js"></script>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data(){
            return{
                formLabelWidth: '120px',
                current:null,
                pageSize:10,
                curr:1,
                total:0,
                tableData:null,
                dialogTreeVisible:false,
                dialogFormVisible:false,
                functions:null,//权限数据
                defaultProps: {//修改属性树的名称
                    children: 'subFunctions',
                    label: 'name'
                },
                role:{
                    id:null,
                    name:'',
                    description:'',
                    createTime:'',
                    updateTime:'',
                    createUserId:'',
                    updateUserId:'',
                    siteId:''
                }
            }
        },
        methods:{
            //加载界面
            loadPage(current){
                this.curr = current;
                axios.get("/roles?curr="+this.curr).then(value => {
                    if (value.data.code==1){
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.curr = value.data.data.current;
                        this.pageSize = value.data.data.size;
                    }
                    this.dialogTreeVisible=false;
                })
            },
            //打开授权树
            openTree(){
                if (this.current){
                    axios.get("/functions/role/"+this.current.id).then(value => {
                       if (value.data.code==1){
                           this.$refs.tree.setCheckedKeys(value.data.data);
                       }
                    });
                    this.dialogTreeVisible=true;
                }else {
                    this.$message("请选择角色")
                }

            },
            //单选控制器
            handleSelectionChangeOne(section,row){
                this.current=row;
                this.$refs.tableCheck.clearSelection();
                this.$refs.tableCheck.toggleRowSelection(row);
            }
            ,
            handleSelectionChange(row){
                this.current=row;
                this.$refs.tableCheck.clearSelection();
                this.$refs.tableCheck.toggleRowSelection(row);
            },
            //全选控制器
            selectAll(){
                this.$refs.tableCheck.clearSelection();
            },
            //权限树选择控制器
            checkTreeNodes(data,row){
                console.log(data);
                console.log(row);
                if (row.checkedKeys.indexOf(data.id)!=-1){
                    axios.post("/role-functions",{roleId:this.current.id,funId:data.id})
                        .then(value => {
                            if (value.data.code==1){
                                this.$message("权限添加成功")
                            }else {
                                this.$message("权限添加失败");
                                this.$refs.tableCheck.clearSelection();
                                this.$refs.tree.setCheckedKeys(row.checkedKeys.remove(data.id))
                            }
                        })
                }else {
                    axios.delete("/role-functions/"+this.current.id+"/"+data.id)
                        .then(value => {
                            if (value.data.code==1){
                                this.$message("权限删除成功")
                            }else {
                                this.$message("权限删除失败");
                                this.$refs.tableCheck.clearSelection();
                                this.$refs.tree.setCheckedKeys(row.checkedKeys.add(data.id))
                            }
                        })
                }
            },
            //打开修改弹窗
            openForm(row){
                console.log(row);
                this.dialogFormVisible=true;
                this.role=row;
            },
            //新增 修改控制
            handleRole(){
                //修改
                if (this.role.id!=null){
                    axios.put("/role?curr="+this.curr,this.role)
                        .then(value => {
                            if (value.data.code==1){
                                this.$message("修改成功");
                                this.loadPage(value.data.data);
                            }
                        })
                }
            },
            //删除角色
            deleteRole(){
                this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    axios.delete("/role/"+this.current.id+"?curr="+this.curr).then(value => {
                        if (value.data.code==1){
                            this.$message("删除成功");
                            this.loadPage(value.data.data);
                        }else {
                            this.$message("删除失败");
                        }
                    });
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            }
        },
        mounted(){
            this.loadPage(1);
            //加载所有的权限
            axios.get("/functions").then(value => {
                if (value.data.code==1){
                    this.functions=value.data.data;
                }
            })
        }
    })
</script>
</html>